// 最大值
$max-number: 50;

@for $i from 5 through $max-number {
  .pl-#{$i},
  .px-#{$i} {
    padding-left: $i + rpx;
  }

  .pr-#{$i},
  .px-#{$i} {
    padding-right: $i + rpx;
  }

  .py-#{$i},
  .pt-#{$i} {
    padding-top: $i + rpx;
  }

  .py-#{$i},
  .pb-#{$i} {
    padding-bottom: $i + rpx;
  }

  .ml-#{$i},
  .mx-#{$i} {
    margin-left: $i + rpx;
  }

  .mr-#{$i},
  .mx-#{$i} {
    margin-right: $i + rpx;
  }

  .my-#{$i},
  .mt-#{$i} {
    margin-top: $i + rpx;
  }

  .my-#{$i},
  .mb-#{$i} {
    margin-bottom: $i + rpx;
  }

  @if $i {
    .text-#{$i} {
      font-size: $i + rpx;
    }
  }

  @if $i % 10 == 0 {
    .border-radius-#{$i} {
      border-radius: $i + rpx;
    }
  }

  @if $i % 5 == 0 {
    .gap-#{$i} {
      gap: $i + rpx;
    }
  }
}

$g: 60;
@while $g < 210 {
  .pl-#{$g},
  .px-#{$g} {
    padding-left: $g + rpx;
  }

  .pr-#{$g},
  .px-#{$g} {
    padding-right: $g + rpx;
  }

  .py-#{$g},
  .pt-#{$g} {
    padding-top: $g + rpx;
  }

  .py-#{$g},
  .pb-#{$g} {
    padding-bottom: $g + rpx;
  }

  .ml-#{$g},
  .mx-#{$g} {
    margin-left: $g + rpx;
  }

  .mr-#{$g},
  .mx-#{$g} {
    margin-right: $g + rpx;
  }

  .my-#{$g},
  .mt-#{$g} {
    margin-top: $g + rpx;
  }

  .my-#{$g},
  .mb-#{$g} {
    margin-bottom: $g + rpx;
  }

  $g: $g + 10;
}

$m: 10;
@while $m < 510 {
  .w-#{$m} {
    width: $m + rpx;
  }
  .h-#{$m} {
    height: $m + rpx;
  }
  $m: $m + 10;
}

.vw-20 {
  width: 20%;
}

.vw-40 {
  width: 40%;
}

.vw-50 {
  width: 50%;
}

.vw-100 {
  width: 100%;
}

.vh-100 {
  height: 100%;
}

.font-bold {
  font-weight: bold;
}

.font-500 {
  font-weight: 500;
}

.font-600 {
  font-weight: 600;
}

.bg-theme {
  background: $uni-color-primary;
}

.bg-white {
  background: white !important;
}

.text-white {
  color: #ffffff;
}

.text-red {
  color: red;
}

.text-grey {
  color: var($uni-text-color-grey);
}

.text-theme {
  color: $uni-color-primary;
}

.text-introduce {
  color: $uni-text-color-theme;
}

.text-grey {
  color: $uni-text-color-grey;
}

.text-red {
  color: $uni-color-error;
}

.text-center {
  text-align: center;
}

.nav-title {
  background-image: linear-gradient(to right, $uni-color-primary, #a3a632);
  -webkit-background-clip: text;
  color: transparent;
}

.flex {
  display: flex;
}

.justify-center {
  justify-content: center !important;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.flex-1 {
  flex: 1;
}

.flex-direction-column {
  flex-direction: column;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

page {
  color: #333333;
  background: #f5f5f5;
  height: 100%;
}
